<template>
  <div class="announcements-container">
    <h2>系统公告</h2>
    
    <el-timeline v-if="announcements.length > 0">
      <el-timeline-item
        v-for="announcement in announcements"
        :key="announcement.id"
        :timestamp="announcement.createTime"
        placement="top"
      >
        <el-card>
          <h4>{{ announcement.title }}</h4>
          <p>{{ announcement.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <div v-else class="empty-announcements">
      <el-empty description="暂无公告" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAnnouncements } from '../../api'

export default {
  name: 'Announcements',
  setup() {
    const announcements = ref([])

    const loadAnnouncements = async () => {
      try {
        const { data } = await getAnnouncements()
        announcements.value = data
      } catch (error) {
        ElMessage.error('获取公告列表失败')
      }
    }

    onMounted(() => {
      loadAnnouncements()
    })

    return {
      announcements
    }
  }
}
</script>

<style scoped>
.announcements-container {
  padding: 20px;
}

.empty-announcements {
  margin: 40px 0;
}

.el-timeline {
  padding: 20px;
}

.el-card {
  margin-bottom: 10px;
}

h4 {
  margin: 0 0 10px 0;
  color: #409EFF;
}

p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}
</style> 